<template>
  <div
    class="warningInfo flex-top"
    style="justify-content: space-between"
    @click="toDetailedWarning"
    v-show="warningShow"
  >
    <div class="warningTitle">
      <p>
        有<span class="warningTitleNumber">{{ warningLength }}</span
        >项天气预警！
      </p>
      <p>由{{ warningStatePlatformName }}发布</p>
    </div>

    <van-icon name="play-circle" size="0.18rem" color="#666" />
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  name: "WarningInfo",
  data() {
    return {};
  },
  computed: {
    ...mapState(["warningStatePlatformName"]),
    ...mapGetters(["warningLength"]),
    warningShow() {
      return this.warningLength > 0 ? true : false;
    },
  },
  methods: {
    toDetailedWarning() {
      this.$router.push("/warning/detailed");
    },
  },
};
</script>

<style scoped>
.warningInfo {
  width: 100%;
  height: auto;
  padding: 0.1rem 0.45rem;
  border-radius: 0.12rem;
  background-color: rgba(160, 166, 180, 0.3);
  margin-bottom: 0.1rem;
}
.warningInfo .warningTitle {
  text-align: left;
}
.warningInfo .warningTitle p {
  font-size: 0.15rem;
  line-height: 0.25rem;
}
.warningInfo .warningTitle .warningTitleNumber {
  padding: 0 0.02rem;
  color: rgba(220, 53, 69);
}
</style>